// 引入当前less
require('../less/course.less')

// 文档加载完成
document.ready(() => {
  // console.log('课程训练');

  // 调用运动顶部导航栏函数,添加到页面顶部
  window.$utils.sportsTopNav('course')

  // 调用底部导航栏函数,添加到页面底部
  window.$utils.footerNavBar('sports')

  // 获取dom  
  let cardNewCourse = document.querySelector('#cardNewCourse')
  let cardList = document.querySelector('#cardList')

  // 获取本地存储
  let userId = JSON.parse(localStorage.getItem('user')).userId
  // console.log(userId);


  // 给cardNewCourse添加事件,新课程跳转
  cardNewCourse.addEventListener('click', function (e) {
    let parentNode = e.target.parentNode
    let courseid = parentNode.id
    location.href = 'courseDetails.html?id=' + courseid
  })

  // 给cardList添加事件,旧课程跳转
  cardList.addEventListener('click', function (e) {
    let parentNode = e.target.parentNode
    let courseid = parentNode.id
    location.href = 'courseDetails.html?id=' + courseid
  })

  // 页面加载调用函数
  renderCourse()
  // 封装函数
  function renderCourse() {
    //  发送ajax请求
    axios.get(window.$utils.BASE_URL + '/sports/courseList?id=' + userId)
      .then((result) => {
        let res = result.data
        console.log(res);
        if (res.status === 0) {
          // 定义数组，保存所有课程数据
          let courseListArr = res.data
          // 新课程  latest === 1
          let newCourse = courseListArr.find((v) => {
            return v.latest === 1
          })
          // 旧课程  latest === 0
          let courselist = courseListArr.filter((v) => {
            return v.latest === 0
          })
          // console.log(courselist);

          // 调用新课程
          getNewCourse(newCourse)
          // 调用旧课程
          getCourseList(courselist)
        }

      })
      .catch((error) => {
        console.log(error);
      })
  }

  // 封装新课程函数
  function getNewCourse(newCourse) {
    // 判断
    if(newCourse){
      // 定义字符串，拼接新课程
    let newCourseHtml = `
    <p class="card-newcourse dpflex fdc"  id="${newCourse.courseId}">
    <img src="${window.$utils.BASE_URL + newCourse.imgurl}" alt="">
    <span class="course-name">${newCourse.name}</span>
    <span class="course-text">${newCourse.desc}</span>
    </p>
  `
    // 显示到页面
    cardNewCourse.innerHTML = newCourseHtml
  }
    }

  // 封装旧课程函数
  function getCourseList(courselist) {
    if(courselist){
      // 定义空字符串
    let coursesHtml = ''
    // 遍历剩下所有的课程
    courselist.forEach(function (v) {
      coursesHtml += `
                    <p class="card-list dpflex fdc por" id="${v.courseId}">
                    <img src="${window.$utils.BASE_URL + v.imgurl}" alt="" class="cardlist-img poa">
                    <span class="curriculum-name poa">${v.name}</span>
                    <span class="curriculum-text poa">${v.desc}</span>
                    </p>
                  `
      // 显示到页面
      cardList.innerHTML = coursesHtml
    })
    }
  }
})




